<template>
	<div class="component-container">
		<div class="component-container__main">
			<el-form ref="dataFormRef" :rules="rules" :model="formData" label-width="140px">
				<el-form-item label="分页查询接口Api" prop="listApi" v-if="pageInfo.op == 'list' || pageInfo.op == 'list2'">
					<el-select v-model="formData.listApi" placeholder="请选择" size="large">
						<el-option v-for="item in pageInfo.urls" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="添加接口Api" prop="addApi" v-if="pageInfo.op == 'list' || pageInfo.op == 'addAndUpdate'">
					<el-select v-model="formData.addApi" placeholder="请选择" size="large">
						<el-option v-for="item in pageInfo.urls" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="修改接口Api" prop="updateApi" v-if="pageInfo.op == 'list' || pageInfo.op == 'addAndUpdate'">
					<el-select v-model="formData.updateApi" placeholder="请选择" size="large">
						<el-option v-for="item in pageInfo.urls" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="删除接口Api" prop="deleteApi" v-if="pageInfo.op == 'list' || pageInfo.op == 'list2'">
					<el-select v-model="formData.deleteApi" placeholder="请选择" size="large">
						<el-option v-for="item in pageInfo.urls" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="详情接口Api" prop="getApi" v-if="pageInfo.op == 'get'">
					<el-select v-model="formData.getApi" placeholder="请选择" size="large">
						<el-option v-for="item in pageInfo.urls" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<div class="component-container__footer">
			<el-button @click="handlePrev">上一步，选择生成页面对象</el-button>
			<el-button type="primary" @click="handleNext">下一步，生成页面</el-button>
		</div>
		<div style="margin-top: 20px"></div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, nextTick, reactive, ref, toRefs } from 'vue';
import { ElForm, ElMessage, ElCascaderPanel } from 'element-plus';
import { Option } from '@/types/common';
// API 引用
import { ajax_request } from '@/codegen/api/index';
import { computed } from '@vue/reactivity';

const emit = defineEmits(['next', 'update:modelValue']);
const dataFormRef = ref(ElForm);
const props = defineProps({
	modelValue: {
		type: Object,
		default: () => {}
	}
});

const pageInfo: any = computed({
	get: () => props.modelValue,
	set: value => {
		emit('update:modelValue', value);
	}
});
const state = reactive({
	formData: { listApi: '', addApi: '', updateApi: '', deleteApi: '', getApi: '' },
	rules: {
		listApi: [{ required: true, message: '请选择列表Api', trigger: 'blur' }],
		addApi: [{ required: true, message: '请选择添加Api', trigger: 'blur' }],
		updateApi: [{ required: true, message: '请选择修改Api', trigger: 'blur' }],
		deleteApi: [{ required: true, message: '请选择删除Api', trigger: 'blur' }],
		getApi: [{ required: true, message: '请选择详情Api', trigger: 'blur' }]
	}
});
const { formData, rules } = toRefs(state);

function handlePrev() {
	emit('prev');
}
function handleNext() {
	dataFormRef.value.validate((valid: any) => {
	  if (valid) {
		pageInfo.value.listApi=state.formData.listApi;  
		pageInfo.value.addApi=state.formData.addApi; 
		pageInfo.value.updateApi=state.formData.updateApi; 
		pageInfo.value.deleteApi=state.formData.deleteApi; 
	    emit('next');
	  }
	});	
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
.component-container {
	&__main {
		margin: 20px auto;
	}

	&__footer {
		position: fixed;
		bottom: 20px;
		right: 20px;
	}
}
</style>
